<template>
  <div class="code-box">
    <div class="code-left">
      <div id="PDF-content">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
        </el-table>
      </div>
      <el-button @click="createPDF">生成PDF文件</el-button>
    </div>
    <div class="code-right">
      <mavon-editor class="markdown-body" codeStyle="monokai" v-html="codeData"
        :externalLink="externalLink"></mavon-editor>
    </div>
  </div>
</template>

<script>
import html2PDF from 'jspdf-html2canvas'
export default {
  name: 'CodePDF',
  data() {
    return {
      externalLink: {
        markdown_css: function () {
          // 这是你的markdown css文件路径
          return "/mavon-editor/markdown/github-markdown.min.css";
        },
        hljs_js: function () {
          // 这是你的hljs文件路径
          return "/mavon-editor/highlightjs/highlight.min.js";
        },
        hljs_css: function (css) {
          // 这是你的代码高亮配色文件路径
          return "/mavon-editor/highlightjs/styles/" + css + ".min.css";
        },
        hljs_lang: function (lang) {
          // 这是你的代码高亮语言解析路径
          return "/mavon-editor/highlightjs/languages/" + lang + ".min.js";
        },
        katex_css: function () {
          // 这是你的katex配色方案路径路径
          return "/mavon-editor/katex/katex.min.css";
        },
        katex_js: function () {
          // 这是你的katex.js路径
          return "/mavon-editor/katex/katex.min.js";
        },
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路',
        },
      ],
    }
  },
  props: {
    codeData: {
      type: String,
    },
  },
  mounted() { },
  created() { },
  methods: {
    createPDF() {
      window.pageYOffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      html2PDF(document.querySelector('#PDF-content'), {
        margin: {
          top: 20,
          right: 20,
          bottom: 50,
          left: 20,
        },
        html2canvas: {
          scale: 4,
        },
        output: 'PDF文件.pdf',
      })
    },
  },
}
</script>

<style lang='scss' scoped>
.el-button {
  margin-top: 20px;
}
</style>